import React, {useEffect, useMemo, useState} from 'react'
import {Button} from 'antd'
import {ArrowDownOutlined} from '@ant-design/icons'
// import Table from '@/components/Table';
import CustomTable from '@/components/Table'
import {PageType} from '../constant'
import Styles from './index.less'
import {getRecommendList} from '@/service/merchantCenter/clue'
import {downloadDocumentUrl} from '@/service/common/download'

interface ClueRecommendationRecordType {
	pageType: string
	detailRecord: Record<string, string>
	clueId: any
}

export function ClueRecommendationRecord({
	pageType,
	detailRecord,
	clueId,
}: ClueRecommendationRecordType) {
	// const [dataList, setDataList] = useState<any[]>([]);
	// const [pagination, setPagination] = useState({ current: 1, size: 10 });
	const [formData, setFormData] = useState({})
	const [total, setTotal] = useState()
	const [params, setParams] = useState({
		current: 1,
		pageSize: 10,
	})
	const [tableList, setTableList] = useState<any[]>([])
	const [loading, setLoading] = useState(false)

	const getTabelValue = async (value: any, pagination?: any) => {
		setLoading(true)
		let values = value
		setFormData(values)
		const newPagination = pagination || {
			current: 1,
			size: params.pageSize,
		}
		setParams(newPagination)
		values = {
			...values,
			...newPagination,
		}
		const res = await getRecommendList({...values, clueId})
		if (res?.data) {
			setTotal(res.data?.total || 0)
			if (res.data?.records) {
				const newData = res.data?.records.map((item: any) => ({
					...item,
					...item.marketingDitch,
				}))
				setTableList(newData || [])
			}
		}
		setLoading(false)
	}

	useEffect(() => {
		getTabelValue(formData)
	}, [])

	const Colnums: any[] = useMemo(
		() => [
			{title: '推荐人', dataIndex: 'referrerUserId', align: 'center'},
			{title: '类型', dataIndex: 'typeStr', align: 'center'},
			{title: '手机号', dataIndex: 'phone', align: 'center'},
			{title: '银行卡号', dataIndex: 'bankAccount', align: 'center'},
			{title: '推荐人添加时间', dataIndex: 'createTime', align: 'center'},
		],
		[],
	)

	return (
		<>
			{pageType ? (
				<div className={Styles.clueRecommendationRecordType}>
					<div className={Styles.titleBox}>线索推荐记录</div>
					<div className={Styles.content}>
						{pageType !== PageType.Detail && (
							<div className={Styles.btnList}>
								<Button
									icon={<ArrowDownOutlined />}
									size="small"
									onClick={() => {
										downloadDocumentUrl({
											resourceId: '179',
											queryDesc:
												'线索推荐记录导出,resourceId:179',
											queryParam: {clueId},
										})
									}}>
									导出
								</Button>
							</div>
						)}
						<CustomTable
							params={params}
							columns={Colnums}
							total={total}
							pagination
							callback={(pagination: any) => {
								getTabelValue(formData, pagination)
							}}
							loading={loading}
							dataSource={tableList}
						/>

						{/* <Table
          pagination
          params={pagination}
          columns={Colnums}
          callback={(p: any) => {
            setPagination(p);
          }}
          dataSource={dataList}
        /> */}
					</div>
				</div>
			) : (
				<></>
			)}
		</>
	)
}
